<template>
  <div class="flex1 flexC bottom_box">
      <p class="table_head flex font_s18">
        <span class="flex1 textC">检查类别</span>
        <span class="flex1 textC">风险等级</span>
        <span class="flex3 textC">机构</span>
        <span class="flex2 textC">监管要素</span>
        <span class="flex4 textC">进度</span>
        <span class="flex1 textC">状态</span>
        <span class="flex1 textC">是否正常</span>
      </p>
    <div @click="handleClick($event)">
        <vueSeamless :data="dataList" :class-option="classOption" class="warp">
            <ul class="table_content_ul">
              <li class="flex font_s16 AlignItemsC"
                  v-for="(item, index) in dataList"
                  :key="index"
                  @click="bottomClick(item.jgxqid, item.isWarn)"
                  :data-orderid="item.jgxqid"
                  :data-iswarn="item.isWarn"
                  :class="{evenbg:index%2==1}">
                <p class="flex1 textC">{{item.jclbName ? item.jclbName : '智能预警'}}</p>
                <p class="flex1 textC">
                  <span class="font_s16"
                        :data-orderid="item.jgxqid"
                        :data-iswarn="item.isWarn"
                        style="background: #D89B62;border-radius: 4px;padding: .2rem .7rem;color: #0D2040">{{item.jjcd ? item.jjcd : '低风险'}}</span>
                </p>
                <p class="flex3 textC"
                   :data-orderid="item.jgxqid"
                   :data-iswarn="item.isWarn">{{item.orgName}}</p>
                <p class="flex2 textC flexC JustifyContentC AlignItemsC textOverflow"
                   style="line-height: 1.6rem;text-align: center"
                   :data-orderid="item.jgxqid"
                   :data-iswarn="item.isWarn">{{item.warnNames }}</p>
                <div class="flex4 textC"
                     :data-orderid="item.jgxqid"
                     :data-iswarn="item.isWarn"
                     :class="item.status==6  ? 'jdlct5':'jdlct'+item.status" style="line-height: 3.125rem;height: 3.125rem;margin-top: .5rem">
                  <p class="flex1" style="margin-top: -1.5rem;white-space:nowrap;">{{item.statusTime}}</p>
                </div>
                <p class="flex1 flex"
                   :data-orderid="item.jgxqid"
                   :data-iswarn="item.isWarn">
                  <img src="@/assets/img/zhjg/js_icon.png" alt="" class="verticalM" style="width: 3.0875rem;height: 3.0875rem;margin-top: .5rem" />
                  接收
                </p>
                <p class="flex1 textC"
                   :data-orderid="item.jgxqid"
                   :data-iswarn="item.isWarn">正常</p>
              </li>
            </ul>
        </vueSeamless>
     </div>
    <modal v-if="orderInfoModal">
      <BottomYLModel
              :rwbh = rwbh
              :yujingdata=yujingdata
              :isWarn = isWarn
              @hidden="hidden(orderInfoModal)" />
    </modal>
  </div>
</template>

<script>
  import vueSeamless from 'vue-seamless-scroll'
  import { orgJgGd, queryJgJgXq, bzfwOrgJgGd, bzfwOrgJgGdInfo } from '@/api/home'
  import Modal from "../../components/Modal";
  import BottomYLModel from "./modal/BottomYLModel";
  export default {
    name: "ComprehensiverBottom",
    components: {BottomYLModel, Modal, vueSeamless },
    computed: {
      classOption: function () {
        return {
          step: .5,
          limitMoveNum: 1,
          openWatch: false, //开启data实时监听

        }
      }
    },
    data () {
      return {
        dataList: [],
        currentPage: 1,
        pageSize: 1000,
        yujingdata: Object,
        orderInfoModal: false,
        rwbh: null,
        isWarn: null
      }
    },
    mounted () {
      this.getData(this.currentPage)
    },
    methods: {
      getData (currentPage) {
        const params = { page: currentPage, pageSize: this.pageSize}
        bzfwOrgJgGd(params).then((response) => {
          if (response.data) {
            this.dataList = response.data.response
          }
        }).catch((response) => {
          console.log(response)
        })
      },
      orderInfo (expectWarnId, isWarn) {
        bzfwOrgJgGdInfo({
          expectWarnId: expectWarnId,
          isWarn: isWarn
        }).then((response) => {
          if (response.data.response) {
            this.yujingdata = response.data.response
            this.orderInfoModal = true
          }
        }).catch((response) => {
          console.log(response)
        })
      },
      handleClick(event) {
        let orderId = event.target.dataset.orderid
        let isWarn = event.target.dataset.iswarn
        this.isWarn = isWarn
        if (orderId) {
          this.orderInfo(orderId, isWarn)
        }
      },
      bottomClick (orderId, isWarn) {
        this.isWarn = isWarn
        if (orderId) {
          this.orderInfo(orderId, isWarn)
        }
      },
      hidden(choose) {
        if (choose === this.orderInfoModal) {
          this.orderInfoModal = false
        }
      }
    }
  }
</script>

<style scoped lang="scss">
.bottom_box {
  .table_head {
    background: #11284F;
    border: 2px solid #172C4C;
    height: 3.025rem;
    line-height: 3.025rem;
    margin: 0 .5rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #CEF9FC;
  }
  .warp{
    height: 16vh;
    overflow: hidden;
    line-height: 3rem;
    margin: 0 .5rem;
  }
  .zs_list li:last-child {
    margin-right: 0;
  }
  .table_content_ul {

  }
  .table_content_ul li {
    font-family: Microsoft YaHei;
    font-weight: 400;
    height: 4.375rem;
    line-height: 4.375rem;
    color: #CEF9FC;
    border-top: 2px solid #172C4C;
    border-left: 2px solid #172C4C;
    border-right: 2px solid #172C4C;
  }
  .table_content_ul li:last-child {
    border-bottom: 2px solid #172C4C;
    margin-bottom: 2rem;
  }
  .evenbg {
    background: #0C1935;
    order-top: 2px solid #172C4C;
    border-left: 2px solid #172C4C;
    border-right: 2px solid #172C4C;
  }
}
.jdlct0 {
  background: url(~@/assets/img/zhjg/1271.png) no-repeat;
  background-size: 100% 80%;
  background-position: bottom;
}
.jdlct1 {
  background: url(~@/assets/img/zhjg/125.png) no-repeat;
  background-size: 100% 80%;
  background-position: bottom;
}

.jdlct2 {
  background: url(~@/assets/img/zhjg/126.png) no-repeat;
  background-size: 100% 80%;
  background-position: bottom;
}

.jdlct3 {
  background: url(~@/assets/img/zhjg/127.png) no-repeat;
  background-size: 100% 80%;
  background-position: bottom;
}

.jdlct4 {
  background: url(~@/assets/img/zhjg/128.png) no-repeat;
  background-size: 100% 80%;
  background-position: bottom;
}

.jdlct5 {
  background: url(~@/assets/img/zhjg/129.png) no-repeat;
  background-size: 100% 80%;
  background-position: bottom;
}

</style>